<template>
  <div>
    <h3>测试批量导入组件</h3>
    <myexcel></myexcel>
    <h3>测试存储桶（存储上传的图片）</h3>
    <input ref="myinput" type="file" @change="mychange" />
    <img :src="url" alt="" />
    <imgupload :imgUrl.sync="imgUrl"></imgupload>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  data () {
    return {
      cosobj: null,
      url: '',
      imgUrl:
        'https://hr73-1252192193.cos.ap-guangzhou.myqcloud.com/43e036056ce548d32cb50a52a9512896.gif'
    }
  },
  methods: {
    mychange () {
      // 一旦图片改变之后，我们需要将图片上传到自己的腾讯云的存储桶中
      // 1.0 得到上传的图片
      console.log(this.$refs.myinput.files[0])
      const file = this.$refs.myinput.files[0]
      // 2.0 通过存储对象，将图片提交到存储桶中
      //   2.1 下载 jdk
      //   2.2 初始化存储对象
      //   2.3 提交图片
      this.cosobj.putObject(
        {
          Bucket: 'hr73-1252192193' /* 必须 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: progressData => {
            // progressData: 上传过程中的实时进度对象
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          // data:上传成功后的返回值
          // err:上传出错的错误信息
          console.log(err || data)
          this.url = 'http://' + data.Location
        }
      )
    }
  },
  created () {
    // 初始化 cos 对象
    this.cosobj = new COS({
      SecretId: 'AKIDjLn7GGdNPl061lBpCOQH0dJxQiqmqdIl', // 身份识别 ID
      SecretKey: 'iUDl8JKApOn1Y2LTQQfmiTBi6JLC2nOr' // 身份密钥
    })
  }
}
</script>

<style></style>
